<template>
  <div class="content-wrap">
    <van-nav-bar title="密群">
      <i class="iconfont icon-jiahaoyou" slot="right" @click="$router.push('/addFriend')"></i>
      <van-icon name="cross" slot="left"/>
    </van-nav-bar>

    <search-box :isSearch="isSearch"></search-box>
    <div class="main-content">
      <van-search placeholder="请输入搜索关键词" readonly background="#f5f6f9" shape="round"
                  style="background: #fff" @click="isSearch = true"/>
      <van-index-bar>
        <div class="message-item friend-item">
          <div class="avatar new-add">
            <i class="iconfont icon-jiahaoyou"></i>
          </div>
          <div class="content">
            <p class="name">
              <span>群通知</span>
            </p>
          </div>
        </div>
        <van-index-anchor index="A"/>
        <router-link :to="{name: 'groupChat', params: {id: i}}" class="message-item friend-item" v-for="item in groupList" :key="item.gid">
          <div class="avatar"></div>
          <div class="content">
            <p class="name">
              <span>哈哈</span>
            </p>
          </div>
        </router-link>
      </van-index-bar>

      <van-divider :style="{padding: '0 16px'}">共{{groupList.length}}个密群</van-divider>
    </div>
  </div>
</template>

<script>
  import searchBox from '@/components/search-box.vue'
  import Socket from '../../utils/socket'
  import { mapState } from 'vuex'

  export default {
    name: 'group',
    components: {
      searchBox
    },
    data () {
      return {
        isSearch: false,
        list: []
      }
    },
    computed: {
      ...mapState({
        groupList: state => state.friend.groupList
      })
    },
    created () {
      Socket.sendData('GroupList')
    }
  }
</script>

<style lang="scss">
  .main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fff;
    height: 100%;
  }

  .van-search {
    position: relative;
    z-index: 100;
  }

  .van-search__content {
    background: #fff;
  }

  .van-index-bar {
    overflow: auto;
  }
</style>
